<template>
  <view class="custom-tree-select">
    <view class="tree-select-options">
      <custom-checkbox v-model="selectAll" @onChecked="onCheckedAll">全选/全不选</custom-checkbox>
      <custom-checkbox v-model="expandAll" @onChecked="onExpandAll">展开/收起</custom-checkbox>
      <custom-checkbox v-model="checkStrictly">父子联动</custom-checkbox>
    </view>
    <view class="tree-select-content">
      <custom-tree-select-list
        v-model="value"
        :items="localdata"
        :fieldsName="fieldsName"
        :expandList="expandList"
        :checkStrictly="checkStrictly"
        @input="(v) => $emit('input', v)"
      />
      <!-- @input 作用：v-model值更新 -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    localdata: {
      type: Array,
      default: () => [],
    },
    fieldsName: {
      type: Object,
      default: () => ({
        key: "key",
        label: "label",
        children: "children",
      }),
    },
  },
  data() {
    return {
      expandAll: false,
      selectAll: false,
      expandList: [],
      checkedAllKey: [],
      expandAllKey: [],
      checkStrictly: false, // 父子是否不关联
    };
  },
  created() {
    this.initCheckedAllKey();
  },
  methods: {
    initCheckedAllKey() {
      const initData = (items, values) => {
        const fieldsName = this.fieldsName;
        values.forEach((ele) => {
          items.push(`${ele[fieldsName.key]}`);
          if (ele[fieldsName.children] && ele[fieldsName.children].length > 0) {
            initData(items, ele[fieldsName.children]);
          }
        });

        return items;
      };

      if (this.localdata.length && this.checkedAllKey.length === 0) {
        initData(this.checkedAllKey, this.localdata);
      }

      return [...this.checkedAllKey];
    },
    getExpandAllKey() {
      const initData = (items, values) => {
        const fieldsName = this.fieldsName;
        values.forEach((ele) => {
          if (ele[fieldsName.children] && ele[fieldsName.children].length > 0) {
            items.push(`${ele[fieldsName.key]}`);
            initData(items, ele[fieldsName.children]);
          }
        });
      };
      if (this.expandAllKey.length === 0) {
        initData(this.expandAllKey, this.localdata);
      }
      return [...this.expandAllKey];
    },
    onCheckedAll(checked) {
      const data = checked ? this.initCheckedAllKey() : [];
      this.$emit("input", data);
    },
    onExpandAll(checked) {
      this.expandList = checked ? this.getExpandAllKey() : [];
    },
  },
  watch: {
    value(values) {
      this.selectAll = values.length === this.initCheckedAllKey().length;
    },
    localdata() {
      const data = this.initCheckedAllKey();
      this.selectAll = this.value.length === data.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-tree-select {
  width: 100%;

  .tree-select-options {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }

  .tree-select-content {
    color: #000;
    border: 1px solid #909399;
    background-color: transparent;

    max-height: 240px;
    overflow: hidden auto;
  }
}
</style>
